<template>
	<!-- 页面 header 相关部分 -->
	<view class="uni-margin-wrap">
		<!-- 页面导航栏 -->
		<u-sticky bgColor="#fff" class="navTabs" v-if="isNavBar">
			<u-tabs :list="list" @click="changeIndex" :current="currentSwiperIndex"></u-tabs>
		</u-sticky>
		<!-- 顶部广告位轮播图 -->
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500">
			<swiper-item v-for="item in swiperAdlists" :key="item.id">
				<navigator :url="'/pages/webview/webview?url='+encodeURI(item.data.link)">
					<image class="banner-swiper-img" open-type="navigate" :src="item.data.image" mode="aspectFill" />
				</navigator>
			</swiper-item>
		</swiper>

		<!-- 遮罩层使用弧形框 -->
		<image class="crile" src="@/static/crile.png" mode="aspectFill" />
		<!-- 两个选项按钮 -->
		<view class="card-header">
			<view class="card-one card-left" @tap="gotoTabs('/pages/feeds/feeds')">
				<image class="img" src="@/static/coffee.png" mode="aspectFill" />
				<view class="iright">
					<view class="title">精彩动态</view>
				</view>
			</view>
			<view class="card-one card-right" @tap="gotoTabs('/pages/me/me')">
				<image class="img" src="@/static/ran.png" mode="aspectFill" />
				<view class="iright">
					<view class="title">个人中心</view>
				</view>
			</view>
		</view>
		<!-- Tab 选项卡 -->
		<view class="tabs-box">
			<view class="one-nav" :class="currentSwiperIndex === 0 ? 'nav-actived' : '' " @tap="swiperChange(0)">动态
			</view>
			<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived' : '' " @tap="swiperChange(1)">资讯
			</view>
		</view>

		<!-- 内容轮播导航实现 -->
		<swiper class="swiper-box" :style=" 'height:'+ swiperSliderHeight " :current="currentSwiperIndex"
			@animationfinish="swiperSlider">
			<!-- 动态列表实现 -->
			<swiper-item class="swiper-item">
				<view class="feeds-box">
					<u-grid :border="true" col="2">
						<u-grid-item v-for="(item, index) in feedsLists" :key="index">
							<view class="nav" @tap="onPageChanged('/subPackages/feedinfo/feedinfo?id='+ item.id)">
								<image class="feed-img" :src="item.cover" />
								<view class="feed-title" v-if="!!item.feed_content">{{ item.feed_content }}</view>
								<view class="feed-info">
									<view class="iview">
										<image class="avatar" :src=" item.avatar" />
										<text class="name">{{ item.name }}</text>
									</view>
									<view class="iview">
										<view class="ilike" @tap.stop="clickLike(item)">
											<image v-if="item.has_like" src="/static/lover.png" class="micon" />
											<image v-else src="/static/love.png" class="micon" />
											<text class="love-count"
												v-if="item.like_count>0">{{ item.like_count }}</text>
										</view>
									</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</swiper-item>
			<!-- 资讯列表实现 -->
			<swiper-item class="swiper-item">
				<view v-for="(item, index) in newsLists" :key="index">
					<view class="one-new" @tap="onPageChanged('/subPackages/newinfo/newinfo?id='+ item.id)">
						<view class="left">
							<view class="title">{{item.title}}</view>
							<view class="uinfo">
								<view class="utime">
									<text class="name">{{ item.author }}</text>
								</view>{{$u.timeFormat(item.created_at, 'yyyy年mm月dd日 hh时MM分ss秒' ) }}发布
								<text
									class="uptime">{{$u.timeFormat(item.created_at, 'yyyy年mm月dd日 hh时MM分ss秒' ) }}发布</text>
							</view>
						</view>
						<view class="right">
							<image class="pic" mode="aspectFill" :src="item.cover" />
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分享数据按钮组件 -->
		<gotoShare />
		<Login ref='login' v-if='!loginState' />

	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	import todoLikeMinxin from '@/minxins/todolike.js'
	import {
		getAdvert,
		getFeeds,
		getNews
	} from 'config/api.js'

	// 引入登录组件
	import gotoShare from '@/components/gotoShare/gotoShare.vue'
	// 引入分享组件
	import Login from '@/components/login.vue'

	export default {
		mixins: [todoLikeMinxin],
		data() {
			return {
				list: [{
					name: '动态',
				}, {
					name: '资讯',
				}],
				isNavBar: false,
				// 轮播图广告列表
				swiperAdlists: [],
				// 当前 推荐 资讯 滑动位置
				currentSwiperIndex: 0,
				// 资讯列表
				newsLists: [],
				// 动态列表
				feedsLists: [],
				// 滑动页面轮播器的高度
				swiperSliderHeight: '800px',
				swiperSliderFeedsHeight: 0,
				swiperSliderNewsHeight: 0,
				// 记录动态的滚动位置
				feedsScrollTop: 0,
				// 记录资讯滚动的位置
				newsScrollTop: 0
			}
		},
		computed: {
			...mapState(['loginState'])
		},
		components: {
			Login
		},
		async onLoad() {
			// 初始化
			// this.swiperAdlists = await getAdvert()
			this.getAds(),
				this.getFds(),
				this.getNs()
			// 用户登录成功以后触发的行为
			uni.$on('indexUserLogin', () => {
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.feedsLists = [],
					this.getFds()
			})
			// 用户退出成功以后触发的行为
			uni.$on('indexUserLogout', () => {
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.feedsLists = [],
					this.getFds()
			})
			// / 发布新的动态后，触发数据更新
			uni.$on("indexFeedsUpdate", ()=>{
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeedsList()
			})
			// 用户点赞一条动态后触发数据更新
			uni.$on('indexFeedLoveChange', item => {
				this.$refs.waterfall.modify(item.id, "like_count", item.like_count);
				this.$refs.waterfall.modify(item.id, "has_like", item.has_like);
			})
		},


		// 下拉顶部请求数据
		onPullDownRefresh() {
			console.log('下拉刷新页面')
			this.getAds()
			if (this.currentSwiperIndex === 0) {
				this.getFds()
			} else {
				this.getNs()
			}
		},
		// 上拉刷新数据
		onReachBottom() {
			console.log('上拉刷新页面')
			if (this.currentSwiperIndex === 0) {
				this.getFds()
			} else {
				this.getNs()
			}
		},
		onPageScroll(ev) {
			// console.log(ev)
			if (this.currentSwiperIndex === 0) {
				this.feedsScrollTop = ev.scrollTop
			} else {
				this.newsScrollTop = ev.scrollTop
			}
			if (ev.scrollTop > 180) {
				this.isNavBar = true
			} else {
				this.isNavBar = false
			}
		},
		methods: {
			onPageChanged(url) {
				// console.log(1111, url)
				uni.navigateTo({
					url: url
				})
			},
			gotoTabs(url) {
				uni.switchTab({
					url
				})
			},
			changeIndex(ev) {
				// console.log(ev)
				this.currentSwiperIndex = ev.index
			},
			// 推荐/资讯 点击标题切换方法
			swiperChange(index) {
				if (index === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.feedsScrollTop
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.newsScrollTop
					})
				}
				this.currentSwiperIndex = index
			},
			// 推荐/资讯 滑动切换方法
			swiperSlider(event) {
				let index = event.detail.current
				if (index === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.feedsScrollTop
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.newsScrollTop
					})
				}
				this.currentSwiperIndex = index
			},
			async getAds() {
				this.swiperAdlists = await getAdvert()
			},
			// 获取动态
			async getFds() {
				const fdsData = await getFeeds()
				let feedsLists = fdsData.feeds.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.images[0].file,
						avatar: item.user.avatar ? item.user.avatar : '/static/nopic.png',
						name: item.user.name
					}
				})
				this.feedsLists = [...this.feedsLists, ...feedsLists]
				this.swiperSliderFeedsHeight = (this.feedsLists.length / 2 * 195 + 30) + 'px'
				this.swiperSliderHeight = this.swiperSliderFeedsHeight
				console.log(this.feedsLists)
			},
			// 获取资讯
			async getNs() {
				const newsData = await getNews()
				let newsLists = newsData.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.image.id
					}
				})
				this.newsLists = [...this.newsLists, ...newsLists]
				this.swiperSliderNewsHeight = (this.newsLists.length * 95 + 20) + 'px'
				this.swiperSliderHeight = this.swiperSliderNewsHeight
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 广告位轮播器相关样式
	.swiper {
		width: 750upx;
		height: 400upx;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		z-index: 1;

		.banner-swiper-img {
			width: 750upx;
			height: 400upx;
			box-shadow: 0 0 2px 0 rgb(188, 188, 188);
		}
	}

	// 遮罩层
	.crile {
		width: 750upx;
		height: 50upx;
		position: absolute;
		left: 0;
		top: 355upx;
		z-index: 9;
	}

	// 精彩动态 个人中心 按钮样式
	.card-header {
		position: absolute;
		left: 0;
		top: 320upx;
		height: 160upx;
		z-index: 99;
		width: 710upx;
		margin-left: 20upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		align-content: center;

		.card-one {
			width: 328upx;
			height: 96upx;
			border-radius: 49upx;
			background-color: #fff;
			margin: 0 10upx;
			box-shadow: 0 0 2px 0 rgb(188, 188, 188);
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;

			.img {
				width: 44upx;
				height: 44upx;
				margin-left: 50upx;
			}

			.iright {
				margin-left: 30upx;
				text-align: left;
				color: #888;

				.title {
					font-size: 30upx;
					color: #001432;
				}
			}
		}
	}

	// 推荐、咨询 按钮样式
	.tabs-box {
		width: 750upx;
		position: absolute;
		z-index: 1;
		left: 0;
		top: 480upx;
		display: flex;
		flex-direction: row;
		justify-content: center;

		.one-nav {
			height: 80upx;
			width: 110upx;
			color: #9B9B9B;
			font-size: 36upx;
			text-align: center;
			font-weight: blod;

			&.nav-actived {
				color: #0050FF;
			}
		}
	}

	// 内容轮播导航实现
	.swiper-box {
		// background-color: #f1f1f1;
		padding: 20upx 0 40upx;
		margin-top: 550upx;

		// 动态栏的样式
		.feeds-box {
			width: 735upx;
			margin-left: 13upx;
			padding-bottom: 20upx;

			.nav {
				width: 358upx;
				margin-bottom: 12upx;
				background-color: #FFF;
				border-radius: 20upx;
				position: relative;

				.feed-img {
					width: 358upx;
					height: 300upx;
					border-radius: 10upx;
				}

				.feed-title {
					width: 350upx;
					margin-top: 15upx;
					margin-left: 10upx;
					font-size: 28upx;
					line-height: 40upx;
					color: #001432;
					text-align: left;
				}

				.feed-info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10upx;
					font-size: 20upx;
					color: #666;
					padding: 0 10upx 16upx;

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;

						.avatar {
							margin-right: 10upx;
							height: 40upx;
							width: 40upx;
							border-radius: 50%;
							border: 1upx solid #eee;
						}

						.name {
							max-width: 120upx;
							color: #757474;
						}

						.ilike {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
							align-items: center;
							align-content: center;
							height: 60upx;
							padding: 0 10upx;
							background-color: #FFFFFF;

							.micon {
								width: 32upx;
								height: 28upx;
							}

							.love-count {
								padding-left: 10upx;
								color: #757474;
							}
						}
					}
				}
			}
		}

		// 资讯轮播
		.swiper-item {
			background-color: #fff;
			width: 750upx;

			.one-new {
				width: 700upx;
				height: 74px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: flex-start;
				align-content: center;
				padding-bottom: 10px;
				padding-top: 10px;
				padding-left: 25upx;
				padding-right: 25upx;
				border-bottom: 1px solid #f1f1f1;

				.left {
					width: 490upx;
					height: 140upx;
					text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;

					.title {
						font-size: 30upx;
						line-height: 42upx;
						color: #001432;
						margin-top: 21upx;
					}

					.uinfo {
						width: 490upx;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						margin-top: 6upx;
						font-size: 20upx;
						color: #999;

						.utime {
							font-size: 24upx;

							.name {
								max-width: 120upx;
								color: #777;
							}
						}
					}
				}

				.right {
					width: 120upx;

					.pic {
						width: 120upx;
						height: 120upx;
						margin-top: 20upx;
						border-radius: 6upx;
					}
				}
			}
		}
	}
</style>
